<template>
        <el-form>
            <el-form-item>
               <el-button type="primary" @click="addRole">添加角色</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" border style="width: 100%">
    <el-table-column prop="roleId" label="编号" width="180" />
    <el-table-column prop="roleName" label="角色名" width="180" />
    <el-table-column prop="authority" label="操作">
    <template #default="scope">
        <el-button link size="small" @click="changeUser(scope.row)">
        修改权限
        </el-button>
      </template>
        </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { getAuthorityList, getRoleList } from '@/request/api';
import { InitData ,ListInt} from '@/type/role';
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router/index';


export default defineComponent({
    setup () {
        const data=reactive(new InitData())
        onMounted(()=>{
            getRole()
        })
        const getRole=()=>{
            getRoleList().then(res=>{
                // console.log(res);
                data.list=res.data;
            })
        };
        const addRole=()=>{
            ElMessageBox.prompt('请输入要添加的角色', 'Tip', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }).then(({ value }) => {
            if(value){
                data.list.push({authority:[],roleId: data.list.length+1,roleName: value})
            }
        ElMessage({
        type: 'success',
        message: `${value}添加成功`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消添加',
      })
    })

    }
        const changeUser=(row:ListInt)=>{
            // console.log(row);
            router.push({
                name:"authority",
                params:{
                    id:row.roleId,
                    authority:row.authority
                }
            })

        }
        return {...toRefs(data),addRole,changeUser}
    }
})
</script>

<style scoped>

</style>